<template>
    <div class="ele-body">
      <!-- 搜索表单 -->
      <logSearch @search="reload"  />
      <!-- 数据表格 -->
      <el-card shadow="never">
        <ele-pro-table
          ref="table"  row-key="id" :columns="columns" :datasource="datasource"  :need-page="true"  @done="onDone"  :height="tableHeight" :full-height="tableFullHeight"
        >
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button
            v-permission="'System_Opeartion_Exprot'"
              size="small"
              icon="el-icon-upload2"
              class="ele-btn-icon"
              @click="reportexcel"
            >
              导出
            </el-button>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 导出数据 -->
      <ExportDialog ref="ExportDialog"></ExportDialog>
    </div>
  </template>
  
  <script>

    import logSearch from './components/log-search.vue';
    import ExportDialog from '@/components/Excel/ExportDialog'
    import { QueryLogPageList } from '@/api/systemmanager/logmanager';
    
    export default {
      name: 'Log',
      components: {logSearch,ExportDialog},
      data() {
        return {
          // 表格列配置
          columns: [
            {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号',},
            // {prop: 'account', label: '登录账号', showOverflowTooltip: true, sortable: 'code',align: 'center',},
            {prop: 'accountName', label: '登录名称', showOverflowTooltip: true, sortable: 'name',align: 'center',},
            {prop: 'modules', label: '操作模块', showOverflowTooltip: true,sortable: 'typeId',align: 'center',},
            {prop: 'events', label: '事件', showOverflowTooltip: true,sortable: 'contactName',align: 'center',},
            // {prop: 'ip', label: 'IP', showOverflowTooltip: true,sortable: 'contactPhone',align: 'center',},
            {
              prop: 'createDate', label: '创建时间', width: 200,showOverflowTooltip: true, align: 'center',sortable: 'createDate',
              formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD HH:mm:ss");}
            },
          ],
          //是否详情
          fixedHeight:true,
          // 当前编辑数据
          current: null,
          // 是否显示编辑弹窗
          showEdit: false,
          // 全部数据
          projectList: [],
          // 导出列
          exportList: [
            // { name: "登录账号", keys: "account", status: true },
            { name: "登录名称", keys: "accountName", status: true },
            { name: "操作模块", keys: "modules", status: true },
            { name: "事件", keys: "events", status: true },
            // { name: "IP", keys: "ip", status: true },
            { name: "创建时间", keys: "createDate", status: true },
          ]
        };
      },
      computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

          return fh;
        },
      },
      methods: {
        /* 表格数据源 */
        async datasource(params) {
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }
          let data = await QueryLogPageList(params.where);

          return {
              list:data.items,
              count:data.totalrecords,
          };
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
          this.supplierList = data;
        },
        /* 刷新表格 */
        reload(where) {
          
          this.$refs.table.reload({ where: where });
        },
        
        /* 导出 */
        reportexcel(pams) {

          //初始化参数
          let params = {
            pagesize: 0,
            pageindex: 1,
            conditions: [],
            orderBys: [{ sort: "createDate", order: 1, }],
          };
          //加载进度条
          const loading = this.$loading({ lock: true });
          //重新请求查询
          this.$refs.table.doRequest(({ where }) => {
          if(where){
            params.orderBys = where.orderBys;
            params.pageindex = where.pageindex;
            params.conditions = where.conditions;
          }
          //查询数据
          QueryLogPageList(params)
            .then((data) => {
              loading.close();
              this.$refs.ExportDialog.showEdits = true
              this.$refs.ExportDialog.checkList = this.exportList
              this.$refs.ExportDialog.titleName = "日志列表"
              this.$refs.ExportDialog.dataList = data.items;
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
          });
        },
      }
    };
  </script>
   <style lang="scss" scoped>
  
  
    // ::v-deep .el-table__body-wrapper {
    //   height: 450px !important;
    //   overflow-y:auto !important;
    // }
  </style>